<!DOCTYPE HTML>
<html style="width:100%; height:100%; margin:0px; padding:0px" xml:lang="en" lang="en">
  <head>
    <!--
    This HTML page is meant to provide a starting point for testing
    out of a source-tree. It does not require a dojo-amalgamation
    but uses dojo directly from Google's CDN (content delivery networks).
    Currently it has all the collaborative editing gadgets included,
    and requires pullbox functionality in the server.
    This page is meant to be served out of a webodf source directory.
    -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Collaborate Editor (CDN)</title>

    <!-- dojo setup: start -->
    <script type="text/javascript">
      var basedir = window.location.pathname;
      basedir = basedir.substr(0, basedir.lastIndexOf("/"));
      dojoConfig = {
        paths: {
          "webodf/editor": basedir,
          "resources": basedir + "/resources"
        }
      }
    </script>

    <link rel="stylesheet" type="text/css"
    href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/resources/dojo.css"/>
    <link rel="stylesheet" type="text/css"
    href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" type="text/css"
    href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/layout/resources/ExpandoPane.css"/>
    <link rel="stylesheet"
    href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/widget/ColorPicker/ColorPicker.css"/>

    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"
      data-dojo-config="async: true"></script>
    <!-- dojo setup: end -->

    <!-- editor: start -->
    <link rel="stylesheet" type="text/css" href="wodotexteditor.css"/>
    <link rel="stylesheet" type="text/css" href="wodocollabpane.css"/>
    <script src="webodf.js" type="text/javascript" charset="utf-8"></script>
    <script src="wodocollabtexteditor.js" type="text/javascript" charset="utf-8"></script>
    <script src="pullboxeditor.js" type="text/javascript" charset="utf-8"></script>
    <!-- editor: end -->
  </head>

  <body style="width:100%; height:100%; margin:0px; padding:0px" onload="createEditor();">
    <!-- 3 pages, switching between them is controlled by setting the style's display value -->

    <!-- Login page: start -->
    <div id="loginContainer" style="display: none; text-align: center">
      <form name="loginForm">
        <p>Login:<br><input name="login" type="text" size="30" maxlength="30"></p>
        <p>Password:<br><input name="password" type="password" size="30" maxlength="40"></p>
        <input name="Submit"  type="submit" value="Let me!"/>
      </form>
    </div>
    <!-- Login page: start -->

    <!-- Session list page: start -->
    <div id = "sessionListContainer" style="display: none; text-align: center">
      <h1>Sessions</h1>
      <div id="sessionList"></div>
    </div>
    <!-- Session list page: end -->

    <!-- Editor page: start -->
    <div id="editorContainer" style="display: none; width:100%; height:100%; margin:0px; padding:0px">
    </div>
    <!-- Editor page: end -->
  </body>
</html>
